<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>地球展示</title>
    <style>
        #main{position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
    </style>
    <script src="echarts/map/js/world.js"></script>
</head>
<body>
<div id="main"></div>
<script src="echarts/dist/echarts.js"></script>
<!--<script src="echarts/map/js/world.js"></script>-->
<script src="echarts/dist/echarts-GL.js"></script>
<!--<script src="jquery.min.js"></script>-->
<script>
    var chart = echarts.init(document.getElementById('main'));
    chart.setOption({
        title: {
            text: '',
            subtext: '',
            sublink: '',
            x: 'center',
            y: 'top',
            textStyle: {
                color: 'white'
            }
        },
        globe: {
            baseTexture: 'images/data-1491890179041-Hkj-elqpe.jpg',
            environment: 'images/data-1491837999815-H1_44Qtal.jpg',
            heightTexture: 'images/data-1491889019097-rJQYikcpl.jpg',
            displacementScale: 0.1,
            displacementQuality: 'high',

            shading: 'lambert',


            light: {
                ambient: {
                    intensity: 0.1
                },
                main: {
                    intensity: 1.5
                }
            },
            viewControl: {
                autoRotate: true
            },
            silent: true,
            layers: [{
                type: 'blend',
                blendTo: 'emission',
                texture: 'images/data-1491890291849-rJ2uee5ag.jpg'
            }, {
                type: 'overlay',
                texture: 'images/data-1491890092270-BJEhJg96l.png',
                shading: 'lambert',
                distance: 5
            }]
        },
        roam:{
            autoRotateAfterStill:1,//交互后1s重新自动旋转
            focus:"Myanmar"//开始聚焦在中国
        },
        series: []

    });

    window.addEventListener('resize', function () {
        chart.resize();
    });
</script>

</body>
</html>